<template>
    <div>
        <div class="one">
            <div class="one_1">
                <div><img :src="img1"/></div>
                <div>面包</div>
            </div>
            <div class="one_2">
                <div><img :src="img2"/></div>
                <div>茄子</div>
            </div>
        </div>
        <div class="two">
            <div class="two_1">
                <div><img :src="img3"/></div>
                <div>黄瓜</div>
            </div>
            <div class="two_2">
                <div><img :src="img4"/></div>
                <div>豆腐</div>
            </div>
        </div>
        <div class="three">
            <div class="three_1">
                <div><img :src="img5"/></div>
                <div>披萨</div>
            </div>
            <div class="three_2">
                <div><img :src="img6"/></div>
                <div>丸子</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
              img1:require('../img/image16.jpg'),
              img2:require('../img/茄子.jpg'),
              img3:require('../img/黄瓜.jpg'),
              img4:require('../img/豆腐.jpg'),
              img5:require('../img/披萨.jpg'),
              img6:require('../img/丸子.jpg')
            }
        }
    }
</script>
<style scoped>
    .three_2{
    text-align: center;
}
    .three_1{
    text-align: center;
}
    .two_2{
    text-align: center;
}
    .two_1{
    text-align: center;
}
    .three{
    display: flex;
    margin-top: 15px;
}  
    .two{
    display: flex;
    margin-top: 15px;
}  
.one_2{
    text-align: center;
}
.one_1{
    text-align: center;
}
 img{
    width:120px;height:120px;
    margin-left: 15px;
}
.one{
    display: flex;
    margin-top: 15px;
}  
</style>